<template>
    <div class="page-container">
        <ComTitle :list="['角色管理']" />
        <div class="filter-add">
            <Search v-model="keyword" @search="handleSearch" />
            <SCButton @click="add" type="primary"
                ><SCIcon><Plus /></SCIcon>新建角色</SCButton
            >
        </div>
        <el-table :data="data" v-loading="loading" border>
            <el-table-column type="index" label="序号" :width="80">
                <template v-slot="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="name" label="角色"></el-table-column>
            <el-table-column label="操作" :width="280">
                <template #default="scope">
                    <div class="action-btn">
                        <SCButton class="default-btn" type="primary" @click="edit(scope.row)"
                            >编辑</SCButton
                        >
                        <SCButton class="default-btn" type="info" @click="toPermissons(scope.row)"
                            >权限管理</SCButton
                        >
                        <SCButton class="default-btn" type="danger" @click="del(scope.row)"
                            >删除</SCButton
                        >
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <SCDialog v-model="visible" :title="`${isEdit ? '修改' : '新建'}角色`" :width="500">
            <SCForm :model="form" :rules="rules" ref="formRef" label-position="top">
                <SCForm-item class="form-input" prop="name" label="角色名称：">
                    <SCInput v-model="form.name" v-trim placeholder="请输入" clearable />
                </SCForm-item>
            </SCForm>
            <template #footer>
                <SCButton class="default-btn" @click="visible = false">取消</SCButton>
                <SCButton type="primary" @click="handleSubmit" v-loading="submitLoding"
                    >确定</SCButton
                >
            </template>
        </SCDialog>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import ComTitle from "@/components/ComTitle.vue";
import Search from "@/components/Search.vue";
import { Plus } from "@element-plus/icons-vue";
import { FormInstance } from "element-plus";
import { SCMessage, SCMessageBox } from "@sribd/sc-ui/lib";
import router from "../../router";
import { getRoles, addRole, editRole, delRole, Role } from "../../api/roleManage";
const keyword = ref("");
const data = ref<Role[]>([]);
const loading = ref(false);

// 获取角色列表
const handleSearch = async () => {
    loading.value = true;
    try {
        const params = {
            name: keyword.value,
            page: 1,
            pageSize: -1,
        };
        // const res = await getRoles(params);
        // data.value = res.list;
        data.value = [
            {
                id: 1,
                name: "系统管理员",
            },
            {
                id: 2,
                name: "普通管理员",
            },
        ];
    } catch (error) {
        SCMessage({ message: error.msg || "获取列表失败", type: "error" });
    } finally {
        loading.value = false;
    }
};

handleSearch();

const visible = ref(false);
const isEdit = ref(false);

const form = reactive<any>({
    name: "",
});
const rules = {
    name: [
        { required: true, message: "请输入角色名称" },
        { max: 64, message: "长度最大为64个字符" },
    ],
};
const formRef = ref<FormInstance>();

const add = () => {
    isEdit.value = false;
    visible.value = true;
    form.name = "";
    setTimeout(() => {
        formRef.value?.clearValidate();
    }, 0);
};

let editRow;
const edit = (row) => {
    isEdit.value = true;
    visible.value = true;
    editRow = row;
    form.name = row.name;
};

const toPermissons = (row: Role) => {
    router.push("/system/permissonManage/" + row.id);
};

const del = async (row) => {
    await SCMessageBox.confirm("删除后将不能恢复，确定要删除么？", "Warning", {
        title: "删除角色",
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "del-message-box",
    });
    try {
        await delRole(row.id);
        SCMessage({
            message: "删除成功",
            type: "success",
        });
        handleSearch();
    } catch (e) {
        SCMessage({
            message: e.msg || "删除失败",
            type: "error",
        });
    }
};

const submitLoding = ref(false);
const handleSubmit = () => {
    formRef.value?.validate(async (valid) => {
        if (valid) {
            submitLoding.value = true;
            try {
                const data: any = { name: form.name };
                let method: any = addRole;
                if (isEdit.value) {
                    method = editRole;
                    data.id = editRow.id;
                }
                await method(data);
                visible.value = false;
                SCMessage({
                    message: isEdit.value ? "修改成功" : "新建成功",
                    type: "success",
                });
                handleSearch();
            } catch (error) {
                SCMessage({
                    message: error.msg || `${isEdit ? "修改" : "新建"}角色失败`,
                    type: "error",
                });
            } finally {
                submitLoding.value = false;
            }
        }
    });
};
</script>

<style lang="scss" scoped>
.filter-add {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

:deep(.sc-form) {
    width: 100%;
    .sc-form-item {
        width: 100%;
    }
    .sc-input {
        width: 100%;
    }
}
</style>
